<template>
    <view class="big_head_boxs" :style="{ marginBottom: mrbot + 'rpx' }">
        <view class="bot_zhuyao_box">
            <view class="left_image_box">
                <image :src="leftImg" mode="heightFix" />
            </view>
            <view class="input_box" v-if="searchStatus">
                <u-search @change="searchChange" @search="search" searchIcon="search" placeholderColor="#fff"
                    color="#fff" :showActio="false" :clearabled="false" bgColor="none"
                    placeholder="查询请输入房间口令"></u-search>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        leftImg: {
            type: String,
        },
        searchStatus: {//是否显示搜索
            type: Boolean,
            default: false
        },
        mrbot: {//下外边距
            type: String,
            default: '75'
        }
    },
    data() {
        return {
        }
    },
    methods: {
        searchChange(e) {
            this.$emit('transmit', e)
        }
    }
}
</script>
<style lang="scss" scoped>
.big_head_boxs {
    width: 100%;
    height: 154rpx;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    .bot_zhuyao_box {
        width: 100%;
        height: 60rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20rpx;

        .left_image_box {
            height: 50rpx;
            margin-right: 73rpx;

            image {
                height: 100%;
            }
        }

        .input_box {
            width: 440rpx;
            height: 60rpx;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 30rpx;
            display: flex;

        }
    }
}
</style>